<template>
  <div class="app-container">

    <el-form ref="queryRef" :inline="true" :model="queryParams" label-width="68px">
      <el-form-item label="学生姓名" prop="dictName">
        <el-input
            v-model="queryParams.studentName"
            clearable
            placeholder="请输入学生姓名"
            style="width: 240px"
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-input
            v-model="queryParams.studentNo"
            clearable
            placeholder="请输入学生学号"
            style="width: 240px"
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="申请事宜" prop="dictType">
        <el-input
            v-model="queryParams.reason"
            clearable
            placeholder="请输入申请事宜"
            style="width: 240px"
            @keyup.enter="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button icon="Search" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            v-hasPermi="['system:apply:remove']"
            :disabled="multiple"
            icon="Delete"
            plain
            type="danger"
            @click="handleDelete"
        >删除
        </el-button>
      </el-col>
      <right-toolbar @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="55px"/>
      <el-table-column align="center" label="编号" prop="id" width="100px"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="学生姓名" prop="studentName" width="200px"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="学生学号" prop="studentNo" width="200px"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="学生手机号" prop="phone" width="160px"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="申请事宜" prop="reason"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="状态" prop="status" width="100"/>
      <el-table-column align="center" label="创建时间" prop="createTime" width="180px">
        <template v-slot="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="180px">
        <template v-slot="scope">
          <el-button v-hasPermi="['system:apply:edit']" icon="Edit" link type="primary"
                     @click="handleUpdateSuccess(scope.row)">
            通过
          </el-button>
          <el-button v-hasPermi="['system:apply:edit']" icon="Edit" link type="primary"
                     @click="handleUpdateFail(scope.row)">
            不通过
          </el-button>
          <el-button v-hasPermi="['system:apply:remove']" icon="Delete" link type="primary"
                     @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total > 0"
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNum"
        :total="total"
        @pagination="getList"
    />
  </div>
</template>

<script name="Apply" setup>
import {delApply, listApply, updateStatus} from '@/api/apply/apply.js'

const dataList = ref([])
const loading = ref(true)
const total = ref(0)
const ids = ref([])
const data = reactive({
  // form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
})

const {queryParams, form, rules} = toRefs(data)

// /** 查询申请列表 */
function getList() {
  loading.value = true
  listApply(queryParams.value).then(response => {
    dataList.value = response.data.list
    total.value = response.data.total
    loading.value = false

    for (let i = 0; i < dataList.value.length; i++) {
      if (dataList.value[i].status === 0) {
        dataList.value[i].status = '待审核'
      } else if (dataList.value[i].status === 1) {
        dataList.value[i].status = '已通过'
      } else {
        dataList.value[i].status = '不通过'
      }
    }
  })
}

getList()

/** 取消按钮 */
function cancel() {
  open.value = false
  reset()
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef')
  handleQuery()
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.dictId)
  single.value = selection.length !== 1
  multiple.value = !selection.length
}

/** 通过 */
function handleUpdateSuccess(row) {
  console.log(row)
  let param = {
    applyId: row.id,
    status: 1,
  }
  updateStatus(param).then(res => {
    getList()
  })

}

/**
 * 不通过
 * @param row
 */
function handleUpdateFail(row) {
  console.log(row)
  let param = {
    applyId: row.id,
    status: 2,
  }
  updateStatus(param).then(res => {
    getList()
  })
}

/** 删除按钮操作 */
function handleDelete(row) {
  const id = row.id || ids.value
  console.log(id)
  delApply(id).then(res => {
    getList()
  })
}

</script>
